<template>
  <div class="main" v-cloak>
    <div class="contract">
      <div class="contract-left">
        <ul class="contract-left-title">
          <li>
            <img src="../../assets/img/btc.png" alt />
          </li>
          <li @click="drawer = true" style="cursor:pointer">
            {{couple}}
            <i class="el-icon-caret-bottom"></i>
          </li>
          <li :class="Number(closePrice)-Number(openPrice)>=0?'green':'red'">{{closePrice}}</li>
          <li
            :class="Number(closePrice)-Number(openPrice)>=0?'green':'red'"
          >{{((Number(closePrice)-Number(openPrice))/Number(openPrice)*100).toFixed(2)}}%</li>
        </ul>
        <ul class="contract-left-time">
          <li
            @click="chooseTime(v,i)"
            :class="timeChoose==i?'isActive':''"
            v-for="(v,i) in timeList"
            :key="i"
          >{{v}}</li>
        </ul>
        <div class="contract-left-map">
          <!-- 秒合约 -->
          <div v-show="klineStatus" id="container"></div>
          <div class="message">
            <span class="ball"></span>
            <span class="line"></span>
            <span class="price"></span>
          </div>
          <div class="delivery">
            <span></span>
            <span></span>
          </div>
          <!-- k线图 -->
          <iframe
            v-if="!klineStatus"
            id="tradingViews"
            width="100%"
            height="506px"
            src="static/charting_library-master/index3.html"
            frameborder="0"
          ></iframe>
        </div>
      </div>
      <div class="contract-right">
        <div class="contract-right-type">
          <div class="contract-right-type-time">
            <p>{{couple.split('-')[0]}}</p>
            <p>{{couple.split('-')[1]}}-{{odds}}</p>
          </div>
          <div class="contract-right-type-rule">
            <div>
              <img src="../../assets/img/guize.png" alt />
              <span @click="ruleShow=true">秒合约规则</span>
            </div>
            <div>
              <p>当前场：{{currentOpenTime}}</p>
              <p>{{currentCount}}</p>
            </div>
          </div>
        </div>
        <div class="contract-right-next">
          <p>
            <span>下一场：{{nextMessage.createTime}}</span>
            <img v-if="nextMessage.statusName=='购买中'" src="../../assets/img/goumaizhong.png" alt />
            <img v-else src="../../assets/img/dengdaigoumai.png" alt />
          </p>
          <p>{{nextCount}}</p>

          <img src="../../assets/img/next.png" alt />
        </div>
        <!-- 买涨 -->
        <div class="contract-right-deal">
          <div class="contract-right-deal-money">
            <div>
              <img src="../../assets/img/zhang.png" alt />
              <span>涨</span>
            </div>
            <div>
              <img src="../../assets/img/zuanshi.png" alt />
              <span>预计收益：{{benefit1}} USDT</span>
            </div>
          </div>
          <div class="contract-right-deal-input">
            <input
              oninput="value=value.replace(/[^\d.]/g,'')"
              v-model="num1"
              type
              :placeholder="'限额['+nextMessage.numMin+'-'+nextMessage.numMax+']'"
            />
            <span>USDT</span>
          </div>
          <p class="contract-right-deal-pay">余额：{{wallet}} USDT</p>
          <div @click="pay(1)" class="contract-right-deal-btnGreen">看多</div>
        </div>
        <!-- 买跌 -->
        <div class="contract-right-deal" style="margin-top:15px">
          <div class="contract-right-deal-money">
            <div>
              <img src="../../assets/img/die.png" alt />
              <span style="color:#EE633E">跌</span>
            </div>
            <div>
              <img src="../../assets/img/zuanshi.png" alt />
              <span>预计收益：{{benefit0}} USDT</span>
            </div>
          </div>
          <div class="contract-right-deal-input">
            <input
              oninput="value=value.replace(/[^\d.]/g,'')"
              v-model="num0"
              type
              :placeholder="'限额['+nextMessage.numMin+'-'+nextMessage.numMax+']'"
            />
            <span>USDT</span>
          </div>
          <p class="contract-right-deal-pay">余额：{{wallet}} USDT</p>
          <div @click="pay(0)" class="contract-right-deal-btnRed">看空</div>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="tables">
      <tableList ref="updataTable"></tableList>
    </div>
    <!-- 币种切换 -->
    <el-drawer
      class="drawer-one"
      :visible.sync="drawer"
      direction="ltr"
      :with-header="false"
      size="300px"
     >
      <div class="nav-list">
        <div class="nav-list-top">
          <img src="../../assets/img/nav.png" alt />
        </div>
        <ul class="nav-list-title">
          <li>秒合约</li>
          <li>收益率</li>
          <li>倒计时</li>
        </ul>
        <div v-for="(v,i) in allList" :key="i" class="nav-list-type">
          <p>{{v.name.split('/')[0]}}</p>
          <ul @click="updataCouple(w)" v-for="(w,c) in v.list" :key="c">
            <li>{{v.name.split('/')[0]}} {{w.seconds}}s</li>
            <li>
              <span class="red">{{(w.upRatio)*100}}%</span> /
              <span class="green">{{((w.downRatio)*100).toFixed(0)}}%</span>
            </li>
            <li>
              <span>{{w.countDown}}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-drawer>
    <!-- 提交下单 -->
    <el-drawer
      class="drawer-two"
      :visible.sync="drawerTwo"
      direction="rtl"
      :with-header="false"
      size="330px"
     >
      <div class="pay">
        <p class="pay-title">
          <span>购买{{couple.split('-')[0]}}({{couple.split('-')[1]}})</span>
          <span :class="numStatus==1?'green':'red'">
            <span>{{numStatus==1?'涨':'跌'}}</span>
          </span>
        </p>
        <p class="pay-line">
          <span>购买数量</span>
          <span>{{this.numStatus==1?this.num1:this.num0}} USDT</span>
        </p>
        <p class="pay-line">
          <span>当前价格</span>
          <span>{{this.closePrice}} {{name.split('/')[0]}}</span>
        </p>
        <p class="pay-line">
          <span>预计收益</span>
          <span>{{numStatus==1?this.benefit1:this.benefit0}} USDT</span>
        </p>
        <p class="pay-line">
          <span>收益率</span>
          <span
            :class="numStatus==1?'green':'red'"
          >{{numStatus==1?odds.split('/')[0]:odds.split('/')[1]}}%</span>
        </p>
        <p class="pay-line">
          <span>结算时间</span>
          <span>{{nextMessage.createTime}}</span>
        </p>
        <!-- <div :loading="numLoading" class="pay-btn">确认</div> -->
        <el-button
          @click.native="submit(numStatus)"
          :loading="numStatus==1?num1Loading:num0Loading"
          type="warning"
          size="small"
          style="width:100%;margin-top:20px;"
        >确认</el-button>
      </div>
    </el-drawer>
    <!-- 规则 -->
    <el-dialog width="1000px" :visible.sync="ruleShow">
      <div>
        <pdf></pdf>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "../../components/pdf/pdf";
import tableList from "../../components/tableList/tableList";
import Highcharts from "highcharts/highcharts";
import { mapState } from "vuex";
import global from "../../../assets//js/global";
import $ from "jquery";
import qs from "qs";
import {
  scontractList,
  scontractSetting,
  scontractBuying,
  repositoryOrder,
  walletRcdType,
  walletGet
} from "../../api/api";
export default {
  name: "contract",
  data() {
    return {
      allList: [],
      name: "",
      couple: "",
      closePrice: "",
      openPrice: "",
      odds: "",
      num1: "",
      num0: "",
      benefit1: 0.0,
      benefit0: 0.0,
      num1Loading: false,
      num0Loading: false,
      numStatus: 1,
      currentCount: "",
      currentCounts: 0,
      currentOpenTime: "",
      nextCount: "",
      nextCounts: 0,
      nextCount: "",
      nextMessage: [],
      wallet: "",
      // ------------------------------------
      timeList: ["分时线", "k线"],
      timeChoose: 0,
      klineStatus: true, //k线与分时线切换
      drawer: false, //币种列表
      drawerTwo: false,
      //-------------
      ruleShow:false,
    };
  },
  computed: {
    ...mapState(["token","time"])
  },
  created() {
    window.localStorage.setItem("timer", 1);
    this.getALL();
    this.ordeType();
    this.getWallet();
    this.currentCountDown();
    this.nextCountDown();
  },
  watch: {
    time(){
      this.getWallet();
    },
    nextMessage() {
      if (this.nextMessage.statusName == "等待购买") {
        //交割线
        $(".delivery").css({
          display: "block"
        });
        $(".delivery").animate(
          {
            right: 155
          },
          this.nextMessage.waitSeconds * 1000
        );
      } else {
        $(".delivery").css({
          display: "none"
        });
        $(".delivery").animate(
          {
            right: 40
          },
          0
        );
      }
    },
    num1() {
      this.benefit1 = this.mulFun(Number(this.num1), this.odds.split("/")[0]);
    },
    num0() {
      this.benefit0 = this.mulFun(Number(this.num0), this.odds.split("/")[1]);
    }
  },
  mounted() {
    var timer = setInterval(() => {
      if (window.localStorage.getItem("timer") == 2) {
        clearInterval(timer);
      }
      this.closePrice = $(".price").html();
    }, 1000);
  },
  components: {
    tableList,
    pdf
  },
  methods: {
    //点击币对
    updataCouple(val) {
      // console.log(val);
      this.couple = val.name;
      this.openPrice = val.openPrice;
      this.name = val.scontractName;
      this.odds = val.upRatio + "/" + val.downRatio;
      this.secondContract(val.scontractName);
      this.currentTime(val.name);
      this.nextTime(val.name);
      if (!this.klineStatus)
        $("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(
          this.name,
          5
        );
        this.drawer = false
    },
    //刷新所有盘口
    updataAll() {
      scontractList().then(res => {
        this.allList = res.data.data;
      });
    },
    //获取所有盘口
    getALL() {
      scontractList().then(res => {
        this.allList = res.data.data;
        this.couple = res.data.data[0].list[0].name;
        this.openPrice = res.data.data[0].list[0].openPrice;
        this.name = res.data.data[0].name;
        this.odds =
          res.data.data[0].list[0].upRatio +
          "/" +
          res.data.data[0].list[0].downRatio;
        this.secondContract(res.data.data[0].name);
        this.currentTime(res.data.data[0].list[0].name);
        this.nextTime(res.data.data[0].list[0].name);
        this.countDown();
      });
    },
    // 所有盘口倒计时
    countDown() {
      var timer = setInterval(() => {
        if (window.localStorage.getItem("timer") == 2) {
          clearInterval(timer);
        }
        for (var i = 0; i < this.allList.length; i++) {
          for (var j = 0; j < this.allList[i].list.length; j++) {
            if (this.allList[i].list[j].delaySeconds == null) {
              this.$set(this.allList[i].list[j], "countDown", "00.00");
            } else {
              var num = this.allList[i].list[j].delaySeconds--;
              var h = Math.floor(num / 60).toString();
              var s = (num % 60).toString();
              h = h.length == 1 ? "0" + h : h;
              s = s.length == 1 ? "0" + s : s;
              var time = h + ":" + s;
              if (num <= 0) {
                this.updataAll();
              }
              this.$set(this.allList[i].list[j], "countDown", time);
            }
          }
        }
      }, 1000);
    },
    //选择（分时线，k线）
    chooseTime(val, id) {
      this.timeChoose = id;
      if (id == 0) {
        this.klineStatus = true;
      } else {
        this.klineStatus = false;
        setTimeout(() => {
          $("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(
            this.name,
            5
          );
        }, 2000);
      }
    },
    //秒合约初始化
    secondContract(val) {
      var chart = null;
      var all = [];
      var firstNum;
      var url =
        global.klineSecond +
        "/quotations/getSecondDataByTwoCoinName?childCoinName=" +
        val.split("/")[0] +
        "&motherCoinName=" +
        val.split("/")[1];
      $.getJSON(url, function(data) {
        for (var i = 0; i < data.data.length; i++) {
          firstNum = data.data[data.data.length - 1].timeStamp;
          var datas = [];
          datas.push(Number(data.data[i].timeStamp));
          datas.push(data.data[i].close);
          datas.push(data.data[i].createTime);
          all.push(datas);
        }
        // console.log(all);
        function activeLastPointToolip(chart) {
          var points = chart.series[0].points;
          chart.tooltip.refresh(points[points.length - 1]);
        }
        Highcharts.setOptions({
          global: {
            useUTC: false
          }
        });
        chart = Highcharts.chart(
          "container",
          {
            chart: {
              zoomType: "x",
              height: "506px",
              events: {
                load: function() {
                  var series = this.series[0],
                    chart = this;
                  activeLastPointToolip(chart);

                  //定时获取数据
                  window.timers = setInterval(function() {
                    if (window.localStorage.getItem("timer") == 2) {
                      clearInterval(window.timers);
                    }
                    if (data != "") {
                      $(".message").css({ opacity: "1" });
                    }
                    $.getJSON(url, function(data) {
                      // var x = new Date().getTime(), // 当前时间
                      if (
                        firstNum != data.data[data.data.length - 1].timeStamp
                      ) {
                        firstNum = data.data[data.data.length - 1].timeStamp;
                        // console.log(
                        //   firstNum,
                        //   data.data[data.data.length - 1].timeStamp
                        // );
                        var x = Number(
                            data.data[data.data.length - 1].timeStamp
                          ),
                          y = data.data[data.data.length - 1].close; // 随机值
                        series.addPoint([x, y], true, true);
                        var l = chart.series[0].points.length;
                        var p = chart.series[0].points[l - 1];
                        $(".message").animate({
                          left: p.plotX,
                          top: p.plotY - 4
                        });
                        $(".price").html(p.options.y);
                      }
                    });
                  }, 3000);
                }
              }
            },
            title: {
              text: ""
            },
            xAxis: {
              type: "datetime",
              tickPixelInterval: 120
            },
            tooltip: {
              dateTimeLabelFormats: {
                millisecond: "%H:%M:%S.%L",
                second: "%H:%M:%S",
                minute: "%H:%M",
                hour: "%H:%M",
                day: "%Y-%m-%d",
                week: "%m-%d",
                month: "%Y-%m",
                year: "%Y"
              }
            },
            yAxis: {
              tickPixelInterval: 100,
              title: {
                text: ""
              },
              gridLineColor: "#f7f7f7",
              opposite: true,
              labels: {
                x: 150
              }
            },
            legend: {
              enabled: false
            },
            plotOptions: {
              areaspline: {
                fillColor: {
                  linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                  },
                  stops: [
                    [0, "#B0EDE8"],
                    [1, "#fff"]
                  ]
                },
                marker: {
                  radius: 0
                },
                lineWidth: 1.5,
                states: {
                  hover: {
                    lineWidth: 1
                  }
                },
                threshold: null
              }
            },
            series: [
              {
                type: "areaspline",
                name: "",
                // data:[{
                //   x:new Date().getTime(),
                //   y:859.66
                // }],
                // data: (function() {
                //   // // 生成随机值
                //   var data = [],
                //     // time = new Date().getTime(),
                //     i;
                //   for (i = -(all.length - 1); i <= 0; i += 1) {
                //     data.push({
                //       x: all[-i][0],
                //       // x:time+i * 1000,
                //       y: all[-i][1]
                //     });
                //   }
                //   console.log(data,9999)
                //   return data;
                // })(),
                data: (function() {
                  // // 生成随机值
                  var data = [],
                    // time = new Date().getTime(),
                    i;
                  for (i = 0; i <= all.length - 1; i++) {
                    data.push({
                      x: all[i][0],
                      // x:time+i * 1000,
                      y: all[i][1]
                    });
                  }
                  // console.log(data, 9999);
                  return data;
                })(),
                color: "#0A9187"
              }
            ]
          },
          function(chart) {}
        );
      });
    },
    //当前场
    currentTime(val) {
      var params = {
        itemName: val
      };
      scontractSetting(qs.stringify(params)).then(res => {
        this.currentOpenTime = res.data.data.openTime;
        this.currentCounts = res.data.data.delaySeconds;
      });
    },
    //当前倒计时
    currentCountDown() {
      var timer = setInterval(() => {
        if (window.localStorage.getItem("timer") == 2) {
          clearInterval(timer);
        }
        this.currentCounts--;
        var h = Math.floor(this.currentCounts / 60).toString();
        var s = (this.currentCounts % 60).toString();
        h = h.length == 1 ? "0" + h : h;
        s = s.length == 1 ? "0" + s : s;
        this.currentCount = this.currentCounts <= 0 ? "00:00" : h + ":" + s;
        if (this.currentCounts <= 0) {
          this.currentTime(this.couple);
        }
      }, 1000);
    },
    //下一场
    nextTime(val) {
      var params = {
        itemName: val
      };
      scontractBuying(qs.stringify(params)).then(res => {
        this.nextCounts = res.data.data.delaySeconds;
        this.nextMessage = res.data.data;
      });
    },
    //下一次倒计时
    nextCountDown() {
      var timer = setInterval(() => {
        if (window.localStorage.getItem("timer") == 2) {
          clearInterval(timer);
        }
        this.nextCounts--;
        var h = Math.floor(this.nextCounts / 60).toString();
        var s = (this.nextCounts % 60).toString();
        h = h.length == 1 ? "0" + h : h;
        s = s.length == 1 ? "0" + s : s;
        this.nextCount = this.nextCounts <= 0 ? "00:00" : h + ":" + s;
        if (this.nextCounts <= 0) {
          this.nextTime(this.couple);
        }
      }, 1000);
    },
    //获取钱包
    getWallet() {
      var params = {
        token: this.token
      };
      walletGet(qs.stringify(params)).then(res => {
        this.wallet = res.data.data.balance;
      });
    },
    //获取账单类型
    ordeType() {
      var params = {
        token: this.token
      };
      walletRcdType(qs.stringify(params)).then(res => {
        this.$store.commit("getOrderType", JSON.stringify(res.data.data));
      });
    },
    //乘法
    mulFun(arg1, arg2) {
      var m = 0,
        s1 = arg1.toString(),
        s2 = arg2.toString();
      try {
        m += s1.split(".")[1].length;
      } catch (e) {}
      try {
        m += s2.split(".")[1].length;
      } catch (e) {}
      return (
        (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
        Math.pow(10, m)
      );
    },
    // ---------交易下单部分-------------------------------------------
    pay(val) {
      this.numStatus = val;
      switch (val) {
        case 1:
          if (this.num1Loading) {
            this.$notify({
              title: "警告",
              message: "请等待上次交易完成！",
              type: "warning"
            });
            return false;
          }
          if (
            this.num1 < this.nextMessage.numMin ||
            this.num1 > this.nextMessage.numMax
          ) {
            this.$notify({
              title: "警告",
              message: "请输入正确的下注数量！",
              type: "warning"
            });
            return false;
          }
          this.drawerTwo = true;
          break;
        case 0:
          if (this.num0Loading) {
            this.$notify({
              title: "警告",
              message: "请等待上次交易完成！",
              type: "warning"
            });
            return false;
          }
          if (
            this.num0 < this.nextMessage.numMin ||
            this.num0 > this.nextMessage.numMax
          ) {
            this.$notify({
              title: "警告",
              message: "请输入正确的下注数量！",
              type: "warning"
            });
            return false;
          }
          this.drawerTwo = true;
          break;
      }
    },
    submit(val) {
      var params = {
        token: this.token,
        itemName: this.couple,
        direction: val,
        num: val == 1 ? this.num1 : this.num0
      };
      val == 1 ? (this.num1Loading = true) : (this.num0Loading = true);
      repositoryOrder(qs.stringify(params))
        .then(res => {
          val == 1 ? (this.num1Loading = false) : (this.num0Loading = false);
          if (res.data.code == 200) {
            this.$notify({
              title: "提示",
              message: "交易成功！",
              type: "success"
            });
            this.$refs.updataTable.underway();
            this.$refs.updataTable.completed();
            this.getWallet();
          } else {
            this.$notify({
              title: "警告",
              message: res.data.msg,
              type: "warning"
            });
          }
          this.drawerTwo = false;
        })
        .catch(err => {
          this.$notify.error({
            title: "警告",
            message: "系统繁忙！"
          });
          this.drawerTwo = false;
        });
    }
  },
  filters: {},
  beforeDestroy() {
    window.localStorage.setItem("timer", 2);
  }
};
</script>

<style lang="less" scope>
@import url("../../assets/css/comm1.css");
[v-cloak] {
  display: none;
}
.contract {
  background-color: #f7f8f8;
  padding: 10px 5px 0;
  position: relative;
  height: 640px;
  .contract-left {
    background-color: #fff;
    padding-right: 415px;
    height: 100%;
    .contract-left-title {
      padding: 10px 5px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      li {
        margin-right: 20px;
        font-size: 16px;
        font-weight: bold;
      }
      li:nth-child(3),
      li:nth-child(4) {
        font-size: 14px;
        color: #0a9187;
      }
    }
    .contract-left-time {
      display: flex;
      align-items: center;
      border-top: 1px solid #f4f4f4;
      padding: 10px 0 0;
      > li {
        margin-right: 15px;
        font-size: 12px;
        cursor: pointer;
      }
      > .isActive {
        color: #0a9187;
        background-color: #e4f5f4;
        padding: 4px 6px;
        border-radius: 2px;
      }
    }
    .contract-left-map {
      position: relative;
      #tradingViews {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
      }
      > .message {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        opacity: 0;
        z-index: 2;
        > .ball {
          display: inline-block;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          animation: ball 1s ease 0s infinite;
          background: -webkit-gradient(
            radial,
            14 14,
            0,
            14 14,
            14,
            from(#187e78),
            to(#fff)
          );
        }
        > .line {
          display: inline-block;
          width: 100px;
          border-top: 1px dashed #0a9187;
        }
        > .price {
          color: #fff;
          background-color: #187e78;
          font-size: 12px;
          padding: 2px 4px;
          display: inline-block;
          text-align: center;
          border-radius: 2px;
        }
      }
      > .delivery {
        display: none;
        z-index: 1;
        width: 40px;
        height: 455px;
        border-left: 1px solid #187e78;
        position: absolute;
        top: 15px;
        right: 40px;
        background-image: linear-gradient(to right, #bef0ec, #fff);
        z-index: 1;
        > span:nth-child(1) {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #fff;
          border: 3px solid #187e78;
          position: absolute;
          top: -12px;
          left: -6px;
        }
        > span:nth-child(2) {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #fff;
          border: 3px solid #187e78;
          position: absolute;
          bottom: -12px;
          left: -6px;
        }
      }
    }
  }
  .contract-right {
    padding-left: 10px;
    position: absolute;
    right: 0;
    top: 10px;
    width: 415px;
    height: 640px;
    background-color: #f7f8f8;
    .contract-right-type {
      display: flex;
      justify-content: space-between;
      .contract-right-type-time {
        width: 172px;
        height: 100px;
        //   border: 1px solid red;
        background: url("../../assets/img/time.png") no-repeat;
        background-size: 100%;
        padding: 10px;
        > p:nth-child(1) {
          font-size: 14px;
          color: #a1b1b0;
        }
        > p:nth-child(2) {
          font-size: 16px;
          font-weight: bold;
          color: #0a9187;
          margin-top: 15px;
        }
      }
      .contract-right-type-rule {
        width: 222px;
        //   border: 1px solid red;
        > div:nth-child(1) {
          height: 30px;
          padding: 5px 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          background-image: linear-gradient(to right, #e4f5f4, #fff);
          span {
            font-size: 14px;
            margin-left: 10px;
            color: #334d50;
            cursor: pointer;
          }
        }
        > div:nth-child(2) {
          margin-top: 10px;
          height: 60px;
          padding: 10px 10px;
          background-image: linear-gradient(to right, #e4f5f4, #fff);
          p:nth-child(1) {
            font-size: 14px;
            color: #a1b1b0;
          }
          p:nth-child(2) {
            font-size: 15px;
            color: #0a9187;
            font-weight: bold;
            margin-top: 5px;
          }
        }
      }
    }
    .contract-right-next {
      height: 80px;
      background-color: #fff;
      padding: 15px 10px;
      position: relative;
      margin: 12px 0 15px;
      > p:nth-child(1) {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        color: #a1b1b0;
        span {
          margin-right: 10px;
        }
      }
      > p:nth-child(2) {
        font-size: 18px;
        font-weight: bold;
        color: #0a9187;
        margin-top: 10px;
      }
      > img:last-child {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .contract-right-deal {
      background-color: #fff;
      padding-bottom: 5px;
      .contract-right-deal-money {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #f4f4f4;
        > div:nth-child(1) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > span {
            margin-left: 15px;
            font-size: 18px;
            font-weight: bold;
            color: #0a9187;
          }
        }
        > div:nth-child(2) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 12px;
          color: #dbb783;
          span {
            margin-left: 10px;
          }
        }
      }
      .contract-right-deal-input {
        margin: 15px 15px 0;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #f4f4f4;
        > input {
          border: 0;
          outline: none;
          color: #a1b1b0;
          font-size: 14px;
        }
        > span {
          font-size: 14px;
          color: #a1b1b0;
          font-weight: 300;
        }
      }
      .contract-right-deal-pay {
        text-align: right;
        color: #334d50;
        font-size: 12px;
        margin: 15px;
      }
      .contract-right-deal-number {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px 10px;
        > div:nth-child(1) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > span {
            font-size: 14px;
            color: #a1b1b0;
            margin-left: 10px;
          }
        }
        > div:nth-child(2) {
          span {
            margin-left: 10px;
            display: inline-block;
            font-size: 14px;
            color: #a1b1b0;
            width: 42px;
            text-align: center;
            line-height: 27px;
            height: 27px;
            background-color: #f7f8f8;
            border-radius: 15px;
            cursor: pointer;
          }
          .greenActive {
            color: #187e78;
            border: 1px solid #187e78;
            background-image: linear-gradient(#fff, #e4f5f4);
          }
          .redActive {
            color: #ee633e;
            border: 1px solid #ee633e;
            background-image: linear-gradient(#fff, #ffe5df);
          }
        }
      }
      .contract-right-deal-btnGreen {
        margin: 0 10px 10px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        font-weight: bold;
        border-radius: 5px;
        overflow: hidden;
        background: url("../../assets/img/maizhang.png") no-repeat;
        background-size: 100%;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.5s linear;
      }
      .contract-right-deal-btnGreen:hover,
      .contract-right-deal-btnRed:hover {
        opacity: 0.8;
      }
      .contract-right-deal-btnRed {
        margin: 0 10px 10px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        font-weight: bold;
        border-radius: 5px;
        overflow: hidden;
        background: url("../../assets/img/maidie.png") no-repeat;
        background-size: 100%;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.5s linear;
      }
    }
  }
}
.nav-list {
  padding: 10px;
  .nav-list-top {
    img {
      width: 100%;
    }
  }
  .nav-list-title {
    border-bottom: 1px solid #f7f8f8;
    display: flex;
    padding: 10px 0;
    > li {
      width: 33.33%;
      font-size: 14px;
      color: #a1b1b0;
    }
    > li:last-child {
      text-align: right;
    }
  }
  .nav-list-type {
    > p:nth-child(1) {
      font-size: 16px;
      color: #0a9187;
      border-left: 4px solid #0a9187;
      font-weight: bold;
      padding-left: 10px;
      margin: 10px 0 0;
    }
    > ul {
      border-bottom: 1px solid #f7f8f8;
      display: flex;
      padding: 10px 0;
      > li {
        width: 33.33%;
        font-size: 14px;
        color: #a1b1b0;
        cursor: pointer;
      }
      > li:last-child {
        text-align: right;
      }
    }
    > ul:hover {
      background-color: #f7f7f7;
    }
  }
}
.pay {
  .pay-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 20px 0 20px;
    color: #334d50;
    > span:last-child {
      margin-left: 10px;
    }
  }
  .pay-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    span:nth-child(1) {
      font-size: 14px;
      color: #a1b1b0;
    }
    span:nth-child(2) {
      color: #334d50;
      font-weight: bold;
      font-size: 12px;
    }
  }
  .pay-btn {
    text-align: center;
    font-size: 15px;
    color: #fff;
    background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
    padding: 8px 0;
    border-radius: 5px;
  }
}
.tables {
  background-color: #f7f8f8;
  padding-top: 10px;
  margin-bottom: 20px;
}

// -----------------------------
.drawer-two {
  .el-drawer {
    height: 320px !important;
    margin-top: 200px;
    border-radius: 10px 0 0 10px;
    padding: 10px 20px;
    overflow: none !important;
  }
}
</style>
